<template>
  <div class="product-array">
    <div class="content-container">
      <div class="naviga"><span>新产品上市计划&nbsp;>  </span><span class="setColor">产品阵列</span></div>
      <div class="mainPage">
        <div class="whiteContainer boederSet arrSetContainer" style="margin: 6px 12px;">
          <div class="arrSetItem boederSet">
            <circle-compent :detailCatagrayCount="stateCircle.waitTestSaleNumber" :detailProductCount="stateCircle.testSalingNumber" :detailOnLine="stateCircle.preHotNumber"
                            :detailOffLine="stateCircle.saleHeightNumber" :percent="stateCircle.saleContinueNumber" :titleName="titleNameSet"></circle-compent>
          </div>
          <div class="arrSetItem searchParamSet">
            <div class="searchParamItem">
              <el-form :inline="true" :model="onProdQuene" class="demo-form-inline" size="small">
                <el-form-item>
                  <el-input v-model="onProdQuene.productCode" placeholder="输入产品型号/名称"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="width: 120px;" type="primary" @click="onSubmitProdQuene(onProdQuene)">搜 索</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="searchParamItem">
              <el-popover
                placement="top"
                width="640"
                v-model="visiblePopover">
                <div class="searchContainer">
                  <div class="searchItem" style="flex-direction: column;">
                    <div class="searchItemHeader">
                      销售类型：
                    </div>
                    <div class="searchCheck" style="display: flex;">
                      <el-checkbox class="allSetPadding" :indeterminate="indeterType" v-model="checkAllType" @change="checkAllTypeChange">全选</el-checkbox>
                      <el-checkbox-group v-model="searchQueneSet.listSaleType" @change="handleCheckedTypeChange">
                        <el-checkbox v-for="status in codeProdSet" :label="status" :key="status">{{status}}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                  <div class="searchItem">
                    <div class="searchItemHeader">
                      价格区间：
                    </div>
                    <div class="searchRange">
                      <el-input size="small" type="number" :min="0" v-model="searchQueneSet.firstGuidePrice" placeholder="最低价格"></el-input>
                      <span style="width: 30px;font-size: 20px;display: flex;justify-content: center;">-</span>
                      <el-input size="small" :min="0" type="number" v-model="searchQueneSet.secondGuidePrice" placeholder="最高价格"></el-input>
                    </div>
                  </div>
                  <div class="searchItem" style="flex-direction: column;">
                    <div class="searchItemHeader">
                      上市状态：
                    </div>
                    <div class="searchCheck" style="display: flex;">
                      <el-checkbox class="allSetPadding" :indeterminate="indeterStatus" v-model="checkAllStatus" @change="checkAllStatusChange">全选</el-checkbox>
                      <el-checkbox-group v-model="searchQueneSet.listStatus" @change="handleCheckedStatusChange">
                        <el-checkbox v-for="status in statusSet" :label="status.value" :key="status.value">{{status.label}}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
                <div class="searchFooter">
                  <div class="searchSureContainer">
                    <el-button type="primary" size="mini" @click="sureSearchQuene(searchQueneSet)">确 定</el-button>
                    <el-button type="info" size="mini" @click="visiblePopover = false">取 消</el-button>
                  </div>
                </div>
                <el-button style="width: 120px;" size="small" slot="reference">筛选<i class="el-icon-arrow-down el-icon--right"></i></el-button>
              </el-popover>
            </div>
          </div>
          <div class="arrSetItem">
            <el-table
              :data="prodQueneSet"
              stripe
              border
              class="setHeight boederSet"
              style="width: 100%">
              <el-table-column
                prop="productCode"
                label="产品型号">
              </el-table-column>
              <el-table-column
                prop="categoryName"
                label="品类">
              </el-table-column>
              <el-table-column
                prop="productType"
                label="销售类型">
              </el-table-column>
              <el-table-column
                prop="guidePrice"
                label="销售指导价(元)">
              </el-table-column>
              <el-table-column
                prop="statu"
                label="上市状态">
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="planToDetail(scope.row.productId,scope.row.productCode+'/'+scope.row.productName)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="arrSetItem paginationSet">
            <div class="pagination-container">
              <div class="toStart" @click="setCurrentPage(1)">
                首页
              </div>
              <el-pagination background @current-change="setCurrentPage"
                             layout="prev, pager, next" :current-page.sync="currentPage" :total="totalRecord">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import CircleCompent from 'router/marketSale/compentSet/circleCompent'
  import * as opreate from 'api/getData'
  const tempSet = { preHotNumber: 0, saleContinueNumber: 0, saleHeightNumber: 0, testSalingNumber: 0, waitTestSaleNumber: 0 }

  export default {
    name: "product-array",
    components: {
      CircleCompent
    },
    data(){
      return {
        visiblePopover: false,
        statusSet: [
        {
          value: 0,
          label: '待试销'
        },
        {
          value: 1,
          label: '试销中'
        },
        {
          value: 2,
          label: '上市预热'
        },
        {
          value: 3,
          label: '上市高潮'
        },
        {
          value: 4,
          label: '上市持续'
        }
        ],
        checkAllStatus: false,
        indeterStatus: false,
        checkAllType: false,
        indeterType: false,
        codeProdSet: ['引流款','利润款','标杆款','辅助款','新品款'],
        onProdQuene: {
          productCode: ''
        },
        searchFlag: true,
        titleNameSet: ['待试销（个）','试销中（个）','上市预热（个）','上市高潮（个）','上市持续（个）'],
        stateCircle: {},
        searchQueneSet:{
          firstGuidePrice: '',
          secondGuidePrice: '',
          listStatus: [],
          listSaleType: []
        },
        prodQueneSet: [],
        totalRecord: 0,
        currentPage: 0
      }
    },
    mounted(){
      this.initStateCircle({ optLock: 0 })
      this.initStateQuene({},true)
    },
    methods:{
      initStateCircle(param){
        opreate.getProdQuene(param).then(res => {
          this.stateCircle = res.data || tempSet
        }).catch(err => {
          this.stateCircle = tempSet
        })
      },
      initStateQuene(param, falg){
        this.searchFlag = falg
        opreate.getProdQuene(param).then(res => {
          let { page } = res.data || null
          if(page){
            let { list, totalRecord, currentPage } = page
            this.prodQueneSet = list || []
            this.currentPage = currentPage || 0
            this.totalRecord = totalRecord || 0
          }else {
            this.prodQueneSet = []
            this.currentPage = 0
            this.totalRecord =  0
          }
        }).catch(err => {
          console.error(err)
        })
      },
      handleCheckedTypeChange(value){
        let checkedCount = value.length
        this.checkAllType = checkedCount === this.codeProdSet.length
        this.indeterType = checkedCount > 0 && checkedCount < this.codeProdSet.length
      },
      checkAllTypeChange(val){
        this.searchQueneSet.listSaleType = val ? this.codeProdSet : []
        this.indeterType = false
      },
      handleCheckedStatusChange(value){
        let checkedCount = value.length
        this.checkAllStatus = checkedCount === this.statusSet.length
        this.indeterStatus = checkedCount > 0 && checkedCount < this.statusSet.length
      },
      checkAllStatusChange(val){
        this.searchQueneSet.listStatus = val ? this.statusSet.map(v => v.value) : []
        this.indeterStatus = false
      },
      onSubmitProdQuene(onProdQuene){
        this.indeterStatus = false
        this.indeterType = false
        this.checkAllType = false
        this.checkAllStatus = false
        this.searchQueneSet = { firstGuidePrice: '', secondGuidePrice: '', listStatus: [], listSaleType: [] }
        this.initStateQuene(onProdQuene, true)
      },
      setCurrentPage(pageNumber){
        let tempSet = this.searchFlag ? { pageNumber,...this.onProdQuene } : { pageNumber,...this.searchQueneSet }
        this.initStateQuene(tempSet)
      },
      sureSearchQuene(searchQueneSet){
        this.onProdQuene ={ productCode: '' }
        this.initStateQuene(searchQueneSet, false)
        this.visiblePopover = false
      },
      planToDetail(productId,name){
        localStorage.setItem('pname',name)
        const { href } = this.$router.resolve({
          name: `prodQueneDetail`,
          params: {
            productId: productId
          }
        })
        window.open(href, '_blank')
      }
    }
  }
</script>

<style scoped>
  .arrSetContainer{
    display: flex;
    flex-direction: column;
  }
  .searchContainer{
    display: flex;
    flex-direction: column;
    line-height: 35px;
  }
  .arrSetItem{
    display: flex;
    margin: 12px 12px;
  }
  .searchFooter{
    display: flex;
    justify-content: center;
    margin-top: 6px;
  }
  .searchParamSet{
    justify-content: space-between;
    margin: 12px 24px;
  }
  .searchSureContainer{
    width: 40%;
    display: flex;
    justify-content: space-between;
  }
  .searchItem{
    display: flex;
  }
  .allSetPadding{
    margin-right: 18px;
  }
  .searchRange{
    display: flex;
  }
  .paginationSet{
    padding: 0px;
  }
</style>
